<template>
  <el-row class="tac" v-if="menuFlag">
    <el-col :span="24" class="tac-col">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @select="handSelect"
      >
        <el-sub-menu :index="item" v-for="item in Object.keys(menuList)" :key="item">
          <template #title>
            <!-- <el-icon><setting /></el-icon> -->
            <span>{{ menuList[item].name }}</span>
          </template>
          <el-menu-item :index="ele" v-for="ele in Object.keys(menuList[item].role)" :key="ele">{{
            menuList[item].role[ele]
          }}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import router from '@/router/index.js'
import { routerEnumeration, routerPath } from '@/router/utils/routeConfig'
import { sessionGet } from '@/utils/sessionStorage'
import { ref } from 'vue'
import useStore from '../../stores/user'
const store = useStore()
const routerList = ref()
const handSelect = (name) => {
  router.push(routerPath[name])

  routerList.value = store.routerSavePinia({
    name,
    title: routerEnumeration[name],
    path: routerPath[name]
  })
}
const menuList = ref({})
const menuFlag = ref(true)
const getMeun = () => {
  menuList.value = sessionGet('_menu')
}
getMeun()
</script>
<style lang="scss" scoped>
.el-row.tac {
  width: 200px;
  height: 100%;
  .tac-col {
    height: 100%;
    .el-menu-vertical-demo {
      height: 100%;
    }
  }
}
</style>
